<template>
  <div>
    <div style="display: flex;justify-content: flex-end;">
      <!-- 搜索 -->
      <div style="display: flex;">
        <el-input v-model.trim="userid" placeholder="请输入用户Id或文章标题"></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch(userid)">搜索</el-button>
      </div>
    </div>

    <!-- 列表信息 -->
    <el-table :data="showList" style="width: 100%;margin-top: 20px;" fit border>
      <el-table-column label="用户Id" width="180" align="center">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.user }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片" width="250" align="center">
        <template #default="scope">
          <div class="block" v-show="scope.row.img.length != 0">
            <el-carousel height="150px">
              <el-carousel-item v-for="item in scope.row.img">
                <img v-show="item.img != ''" :src="item.img" class="img" alt="图片信息错误" />
              </el-carousel-item>
            </el-carousel>
          </div>
          <p v-show="scope.row.img.length == 0">未上传图片</p>
        </template>
      </el-table-column>
      <el-table-column label="文章标题" width="180" align="center">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.title ? scope.row.title : '信息未上传' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="内容" width="400">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.content ? scope.row.content : '信息未上传' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发布时间" width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.publish }}</span>
        </template>
      </el-table-column>
      <el-table-column label="修改时间" width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.change ? scope.row.change : '未进行修改' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="点赞、评论数量" width="180" align="center">
        <template #default="scope">
          <el-popover trigger="hover" placement="top">
            <p>点赞数量: {{ scope.row.like ? scope.row.like : '无人点赞' }}</p>
            <p>评论数量: {{ scope.row.comment ? scope.row.comment : '无人评论' }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.like }}</el-tag>
              <el-tag size="medium">{{ scope.row.comment }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column label="审核状态" width="180" align="center">
        <template #default="scope">
          <span v-show="scope.row.examine == '未审核'" style="margin-left: 10px;">{{ scope.row.examine }}</span>
          <span v-show="scope.row.examine == '审核失败'" style="margin-left: 10px;color: red;">{{ scope.row.examine }}</span>
          <span v-show="scope.row.examine == '审核通过'" style="margin-left: 10px;color: green;">{{ scope.row.examine
          }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300" align="center">
        <template #default="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
            删除
          </el-button>
          <el-button size="mini" type="success" @click="handleSuccess(scope.$index, scope.row)">
            审核通过
          </el-button>
          <el-button size="mini" type="danger" @click="handlePass(scope.$index, scope.row)">
            审核不通过
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="block">
      <el-pagination layout="prev, pager, next" :total=totalElements :page-size="pageSize" @current-change="onChange">
      </el-pagination>
    </div>

  </div>
</template>
    
<script>
export default {
  data() {
    return {
      totalElements: 0,//总条数
      pathList: [],//总列表
      showList: [],//分页显示列表
      pageSize: 10,//每页条数
      id: '',
      img: [],
      user: '',//用户Id
      title: '',//攻略名称
      content: '',//攻略内容
      publish: '',//发布时间
      change: '',//修改时间
      like: '',//点赞数量
      comment: '',//评论数量
      state: '',//点赞状态
      examine: '',//审核状态
      userid: '',//搜索框的输入内容
    }
  },
  methods: {
    //搜索
    async handleSearch(userid) {
      this.userid = userid
      await this.$http.post("/selessay", { user: userid }).then(res => {
        if (res.code == 200) {
          let result = res.data;
          for (let i in result) {
            if (result[i].examine == '1') {
              result[i].examine = '审核通过'
            } else if (result[i].examine == '0') {
              result[i].examine = '未审核'
            } else if (result[i].examine == '-1') {
              result[i].examine = '审核失败'
            }
          }
          this.pathList = result;
          this.totalElements = this.pathList.length;
          // this.$message.success(res.status)
          if (this.totalElements <= this.pageSize) {
            this.showList = this.pathList
          } else {
            this.showList = this.pathList.slice(0, this.pageSize)
          }
        } else {
          this.$message.error(res.status)
        }
      })
    },
    //删除
    async handleDelete(index, row) {
      let id = row.id;
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http.post("/delessay", { id: id }).then(res => {
          if (res.code == 200) {
            this.pathList.splice(index, 1);
            this.$message.success(res.status)
            if (this.userid) {
              this.handleSearch(this.userid)
            } else {
              this.getList()
            }
          }
        })
      }).catch(() => {
        this.$message.info('已取消删除')
      });
    },
    //审核通过
    async handleSuccess(index, row) {
      let id = row.id;
      let examine = row.examine
      if (examine !== '审核通过') {
        examine = '1'
      }
      await this.$http.post("/sucessay", { id: id, examine: examine }).then(res => {
        if (res.code == 200) {
          this.$message.success(res.status)
          if (this.userid) {
            this.handleSearch(this.userid)
          } else {
            this.getList()
          }
        }
      })
    },
    //审核不通过
    async handlePass(index, row) {
      let id = row.id;
      let examine = row.examine
      if (examine !== '审核失败') {
        examine = '-1'
      }
      await this.$http.post("/passessay", { id: id, examine: examine }).then(res => {
        if (res.code == 200) {
          this.$message.warning(res.status)
          if (this.userid) {
            this.handleSearch(this.userid)
          } else {
            this.getList()
          }
        }
      })
    },
    //分页
    onChange(pageNumber) {
      this.showList = [];
      if (this.totalElements < pageNumber * this.pageSize) {
        this.showList = this.pathList.slice(this.pageSize * (pageNumber - 1))
      } else {
        this.showList = this.pathList.slice(this.pageSize * (pageNumber - 1), this.pageSize * pageNumber)
      }
    },
    //获取列表数据
    async getList() {
      await this.$http.get("/getessay").then(res => {
        console.log(res.data)
        let result = res.data;
        //修改审核状态
        for (let i in result) {
          if (result[i].examine == '1') {
            result[i].examine = '审核通过'
          } else if (result[i].examine == '0') {
            result[i].examine = '未审核'
          } else if (result[i].examine == '-1') {
            result[i].examine = '审核失败'
          }
        }
        this.pathList = result;
        this.totalElements = this.pathList.length;
        if (this.totalElements <= this.pageSize) {
          this.showList = this.pathList
        } else {
          this.showList = this.pathList.slice(0, this.pageSize)
        }
      })
    },
  },

  mounted() {
    this.getList();
  },
}
</script>
  
<style>
.img {
  width: 180px;
}
</style>